<template>
  <view class="cart">
    <view class="cart_content" v-if="cart.length > 0">
      <!-- 收货地址 -->
      <my_address></my_address>
      <!-- 标题 -->
      <view class="title">
        <uni-icons class="myicon" type="shop-filled" size="20"></uni-icons>
        <text>购物车</text>
      </view>
      <!-- 商品内容 -->
      <view class="content">
        <uni-swipe-action>
          <block v-for="(item,index) in cart" :key="index">
            <uni-swipe-action-item :right-options="options" @click='handlerClick(item.goods_id)'>
              <my_goods :showNum="true" :showRadio="true" :item="item" @radio-change='radioChange'
                @num-change='numChange'>
              </my_goods>
            </uni-swipe-action-item>
          </block>
        </uni-swipe-action>
      </view>
      <!-- 结算区域 -->
      <view class="total">
        <my-total></my-total>
      </view>
    </view>
    <view class="cart_empty" v-else>
      <image src="../../static/images/cart_empty@2x.png" mode="aspectFill"></image>
      <text>空空如也~</text>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import mySetTabbar from '../../tools/setTabbar.js'
  export default {
    mixins: [mySetTabbar],
    data() {
      return {
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#ff0000'
          }
        }]
      };
    },
    computed: {
      ...mapState('cart', ['cart'])
    },
    methods: {
      ...mapMutations('cart', ['changeStatus', 'changeCount', 'removeGoods']),
      radioChange(e) {
        console.log(e);
        this.changeStatus(e)
      },
      numChange(e) {
        // console.log('numChange',e);
        this.changeCount(e)
      },
      handlerClick(goods_id) {
        this.removeGoods(goods_id)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cart {
    margin-bottom: 50px;

    .title {
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      border-bottom: 1px solid #ccc;

      .myicon {
        margin: 0 10px 0 6px;
      }
    }

    .cart_empty {
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      image {
        width: 100px;
        height: 100px;
        margin-bottom: 5px;
      }
    }
  }
</style>
